<script setup>
import GoodsItem from '@/components/GoodsItem.vue'

import { getSubCategoryAPI } from '@/apis/category';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';


const route = useRoute();
const goodList = ref([]);

const reqData = ref({
	categoryId: route.params.id,
	page: 1,
	pageSize: 20,
	sortField: 'publishTime'
})

const getGoodList = async () => {
	const res = await getSubCategoryAPI(reqData.value).then(res => res.data);
	goodList.value = [...goodList.value, ...res.result.items];
}

onMounted(() => {
	getGoodList();
})

const tabChange = () => {
	reqData.value.page = 1;
	getGoodList();
}

const disabled = ref(false);

const load = () => {
	reqData.value.page += 1;
	getGoodList();
	if (goodList.value.items === 0) {
		disabled.value = true;
	}
}

</script>
<template>
	<div class="subCategory-tabs">
		<el-tabs type="card" class="tabs" v-model="reqData.sortField" @tab-change="tabChange">
			<el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
			<el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
			<el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
		</el-tabs>

		<ul class="good-list">
			<li v-for="item in goodList" :key="item.id">
				<GoodsItem :goods="item" v-infinite-scroll="load" :infinite-scroll-disabled="disabled" />
			</li>
		</ul>
	</div>
</template>

<style scoped lang="scss">
.subCategory-tabs {
	background-color: #fff;
	padding: 20px 10px;

	.good-list {
		display: flex;
		flex-wrap: wrap;
	}
}
</style>